<template>
  <view class="wd-navbar-capsule">
    <!-- 左侧图标 -->
    <wd-icon
      v-if="leftIconType === 'wot'"
      @click="handleLeftClick"
      :name="leftIcon"
      custom-class="wd-navbar-capsule__icon"
      hover-class="wd-navbar-capsule__icon--hover"
      :hover-stay-time="70"
    />
    <view
      v-else-if="leftIconType === 'unocss' || leftIconType === 'iconfont'"
      @click="handleLeftClick"
      :class="[leftIcon, 'wd-navbar-capsule__icon']"
      hover-class="wd-navbar-capsule__icon--hover"
      :hover-stay-time="70"
    />
    <image
      v-else-if="leftIconType === 'local'"
      @click="handleLeftClick"
      :src="leftIcon"
      class="wd-navbar-capsule__icon"
      hover-class="wd-navbar-capsule__icon--hover"
      :hover-stay-time="70"
    />
    <!-- 右侧图标 -->
    <wd-icon
      v-if="rightIconType === 'wot'"
      @click="handleRightClick"
      :name="rightIcon"
      custom-class="wd-navbar-capsule__icon"
      hover-class="wd-navbar-capsule__icon--hover"
      :hover-stay-time="70"
    />
    <view
      v-else-if="rightIconType === 'unocss' || rightIconType === 'iconfont'"
      @click="handleRightClick"
      :class="[rightIcon, 'wd-navbar-capsule__icon']"
      hover-class="wd-navbar-capsule__icon--hover"
      :hover-stay-time="70"
    />
    <image
      v-else-if="rightIconType === 'local'"
      @click="handleRightClick"
      :src="rightIcon"
      class="wd-navbar-capsule__icon"
      hover-class="wd-navbar-capsule__icon--hover"
      :hover-stay-time="70"
    />
  </view>
</template>

<script lang="ts" setup>
  defineOptions({
    name: 'ea-navbar-capsule',
    options: {
      virtualHost: true,
      addGlobalClass: true,
      styleIsolation: 'shared',
    },
  });
  defineProps({
    /** 左侧图标 */
    leftIcon: String,
    /** 左侧图标类型 */
    leftIconType: {
      type: String as PropType<'wot' | 'unocss' | 'iconfont' | 'local'>,
      default: 'wot',
    },
    /** 右侧图标 */
    rightIcon: String,
    /** 右侧图标类型 */
    rightIconType: {
      type: String as PropType<'wot' | 'unocss' | 'iconfont' | 'local'>,
      default: 'wot',
    },
  });
  const emit = defineEmits(['left-click', 'right-click']);

  function handleLeftClick() {
    emit('left-click');
  }
  function handleRightClick() {
    emit('right-click');
  }
</script>

<style lang="scss">
  @import 'wot-design-uni/components/wd-navbar-capsule/index';

  .wd-navbar-capsule__icon--hover {
    // background: unset;
    // background-color: unset;
    opacity: var(--wot-navbar-disabled-opacity, 0.6);
  }
</style>
